<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.25" charset="UTF-8">
    <title>Shipping Address</title>
    <link rel="StyleSheet" th:href="@{/css/jpetstore.css}" type="text/css" media="screen"/>
</head>
<body>
<header th:replace="common/top"></header>

<div id="Catalog">
    <form th:action="@{/order/shipping}" method="post" th:object="${order}">
        <table>
            <tr>
                <th colspan="2">Shipping Information</th>
            </tr>

            <!-- First Name -->
            <tr>
                <td>First Name:</td>
                <td>
                    <input type="text" th:field="*{order.shipToFirstName}" required/>
                </td>
            </tr>

            <!-- Last Name -->
            <tr>
                <td>Last Name:</td>
                <td>
                    <input type="text" th:field="*{order.shipToLastName}" required/>
                </td>
            </tr>

            <!-- Address Line 1 -->
            <tr>
                <td>Address Line 1:</td>
                <td>
                    <input type="text" th:field="*{order.shipAddress1}" required/>
                </td>
            </tr>

            <!-- Address Line 2 -->
            <tr>
                <td>Address Line 2:</td>
                <td>
                    <input type="text" th:field="*{order.shipAddress2}"/>
                </td>
            </tr>

            <!-- City -->
            <tr>
                <td>City:</td>
                <td>
                    <input type="text" th:field="*{order.shipCity}" required/>
                </td>
            </tr>

            <!-- State -->
            <tr>
                <td>State:</td>
                <td>
                    <input type="text" th:field="*{order.shipState}" required/>
                </td>
            </tr>

            <!-- Zip Code -->
            <tr>
                <td>Zip Code:</td>
                <td>
                    <input type="text" th:field="*{order.shipZip}" required pattern="\d{5}(-\d{4})?"/>
                </td>
            </tr>

            <!-- Country -->
            <tr>
                <td>Country:</td>
                <td>
                    <input type="text" th:field="*{order.shipCountry}" required/>
                </td>
            </tr>
        </table>

        <input type="submit" value="Save Shipping Info" class="Button"/>
    </form>
</div>

<div th:replace="common/bottom"></div>
</body>
</html>